<!DOCTYPE html>
<html>
	<head>
		
			<meta charset="utf-8">
		<style type="text/css">
    * {
      padding: 0;
      margin: 0;
      list-style: none;
      border: 0;
    }
    
    .all {
      width: 500px;
      height: 300px;
      padding: 7px;
      border: 1px solid #ccc;
      margin: 10px auto;
      position: relative;
    }
    
    .screen {
      width: 500px;
      height: 300px;
      overflow: hidden;
      position: relative;
    }
    
    .screen li {
      width: 500px;
      height: 300px;
      overflow: hidden;
      float: left;
    }
    
    .screen ul {
      position: absolute;
      left: 0px;
      top: 0px;
      width: 3000px;
    }
    
    .all ol {
      position: absolute;
      right: 10px;
      bottom: 10px;
      line-height: 20px;
      text-align: center;
    }
    
    .all ol li {
      float: left;
      width: 20px;
      height: 20px;
      background: #fff;
      border: 1px solid #ccc;
      margin-left: 10px;
      cursor: pointer;
    }
    
    .all ol li.current {
      background: yellow;
    }
    
    #arr {
      display: none;
      z-index: 1000;
      
    }
    
    #arr span {
      width: 40px;
      height: 40px;
      position: absolute;
      left: 5px;
      top: 50%;
      margin-top: -20px;
      background: #000;
      cursor: pointer;
      line-height: 40px;
      text-align: center;
      font-weight: bold;
      font-family: '黑体';
      font-size: 30px;
      color: #fff;
      opacity: 0.3;
      border: 1px solid #fff;
    }
    
    #arr #right {
      right: 5px;
      left: auto;
    }
  </style>
	</head>
	
	<body>
		<div class="all" id='box'>
  <div class="screen" id="screen">
    <ul>
      <li>
        <img src="img/backimage11.jpg" width="500" height="300"/>
      </li>
      <li>
        <img src="img/timg.jpg" width="500" height="300"/>
      </li>
      <li>
        <img src="img/timg0.jpg" width="500" height="300"/>
      </li>
      <li>
        <img src="img/timg1.jpg" width="500" height="300"/>
      </li>
      <li>
        <img src="img/timg2.jpg" width="500" height="300"/>
      </li>
    </ul>
    <ol>
    </ol>
  </div>
  <div id="arr">
    <span id="left"></span>
    <span id="right">></span>
  </div>

  <script src="/js/animate.js"></script>
<script>
  //需求:
  //        1. 根据ul中li的个数,动态的创建出ol中的li(数字按钮)
  //          1.1 获取元素 ul, ul里面的li, ol
  var screen = document.getElementById('screen');
  var ul = screen.getElementsByTagName('ul')[0];
  var lis = ul.children;
  var ol = screen.getElementsByTagName('ol')[0];
  var indexGlobal = 0; //用于存储当前展示的是哪张图片的下标


 

  //          1.2 遍历ul里面的li
  for (var i = 0; i < lis.length; i++) {
    // 1.3 在遍历的过程中,动态的创建ol中的li,然后把新创建的li放到ol中
    var li = document.createElement('li');
    //由于点击的时候,需要获取当前li的下标,所以在创建的时候就存储一下
    li.setAttribute('index', i);
    // 1.4 给每一个数字按钮,添加数字
    li.innerText = i + 1;
    //1.5 默认一打开,展示第一个图片,所以要给数字按钮1默认高亮
    if (i == 0) {
//                    li.style.backgroundColor = 'yellow';
      li.className = 'current';
    }
    ol.appendChild(li);
    
    
    //       2. 点击数字按钮,让轮播图滚动(修改ul的left).
    //        2.1 获取元素 ol里面的li
    //        2.2 给每一个ol中的li注册点击事件
    li.onclick = fn;
  }

  //要实现无缝轮播的效果,需要克隆第一张图放到最后面
//  注意:一定要在数字按钮,创建完毕之后在克隆
  var newone = lis[0].cloneNode(true);
  ul.appendChild(newone);
  console.log(lis);
  
  //        数字按钮li的事件处理函数
  function fn() {
    //  2.3 在事件处理函数中,修改ul的left
//            2.3.1 目标值是多少?
//                目标值 = 当前图片的下标 * 图片的宽度
//                目标值 = 数字按钮的下标(this.getAttribute('index') * screen的宽度(screen.offsetWidth)
//            console.log(this);
    
    var target = this.getAttribute('index') * screen.offsetWidth;
//            2.3.2  将目标值赋值为ul, 注意值是负值
//            ul.style.left = -target + 'px'; //直接到了目标位置
    //我们需要慢慢滚动过去
    animate(ul, -target, 20);
//            2.4 点击哪个数字按钮,就让谁高亮
    //排他
    for (var i = 0; i < ol.children.length; i++) {
      ol.children[i].className = '';
    }
    this.className = 'current';
    
//    /动态的修改indexGlobal的值,因为indexGlobal要时刻和展示的图片的下标保持一致
    indexGlobal = this.getAttribute('index');
 //   console.log(indexGlobal);
    
  }
  
  //3. 鼠标移入到box中,arr展示,鼠标移出到box外,arr消失
  //3.1 获取元素
  var box = document.getElementById('box');
  var arr = document.getElementById('arr');
  //        3.2 给box注册鼠标移入,移出事件
  box.onmouseenter = function () {
    //        3.3 移入事件,arr展示
    arr.style.display = 'block';
    
    // 7.1 鼠标移入停止自动轮播
    clearInterval(timeid);
  }
  box.onmouseleave = function () {
    //        3.5 移出事件,arr消失
    arr.style.display = 'none';
    
    //7.2 鼠标移出,开始自动轮播
    timeid = setInterval(function(){
      right.onclick();
    }, 3000); //注意: 自动轮播的时间不能太短,因为图片滚动也需要时间
  
  
  }
  
  //4. 点击右边的arr,滚动到下一张图
  //        4.1 获取元素
  var right = document.getElementById('right');
  //        4.2 给right注册点击事件
  right.onclick = function () {
    //        4.3 在事件处理函数中,滚动到下一张图
    //    4.3.1 当前是哪一张? 通过indexGlobal获取到当前的下标
    // 4.4 判断当前是否是第5张图,如果是第5张图,就需要自己写代码,慢慢滚动到第6张
    if(indexGlobal == ol.children.length - 1){
      //证明是第5张,需要自己写代码,滚动过去,实现高亮
//      4.4.1 滚动到第6张
      indexGlobal++;
      //计算展示第6张图,ul应该处于的位置
      var target = indexGlobal * screen.offsetWidth;
      animate(ul,-target, 20, function(){
        //4.4.2 滚动到第6张之后,要立刻跳到第一张
        ul.style.left = '0px';
        //indexGlobal应该和展示的图片保持一致
        indexGlobal = 0;
      });
      
//      4.4.3 实现高亮
      //排他
      for (var i = 0; i < ol.children.length; i++) {
        ol.children[i].className = '';
      }
      ol.children[0].className = 'current';
      
    }else{
 
//    4.3.2 根据当前找到下一个数字按钮,触发数字按钮的点击事件
      indexGlobal++;
//    console.log(ol.children[indexGlobal]);
      ol.children[indexGlobal].onclick();
    }

    
    
  
  }
  
  
  // 5. 点击左边的arr,滚动到上一张图
//  5.1 获取元素
    var left = document.getElementById('left');
//  5.2 给left注册点击事件
    left.onclick = function(){
      //  5.3 在事件处理函数中,根据当前的图片,展示上一张
      //5.3.1 判断当前展示的是不是第一张,如果是第一张,直接跳到最后一张,然后滚动到第5张
      if(indexGlobal == 0){
        //直接跳到最后一张
        indexGlobal = ol.children.length;
        ul.style.left = -indexGlobal * screen.offsetWidth + 'px';
        //然后再滚动到第五张
        indexGlobal--;
        ol.children[indexGlobal].onclick();
        
      }else{
        indexGlobal--;
        ol.children[indexGlobal].onclick();
      }
    
    }

  
// 6. 让轮播图自动轮播
  var timeid = setInterval(function(){
    right.onclick();
  }, 3000); //注意: 自动轮播的时间不能太短,因为图片滚动也需要时间


</script>
</div>
<style>
	div{ float:left}
</style>

	

<div style="height: 200px; width: 50%;background-color: aqua;">1</div>
<div style="height: 200px; width: 50%;background-color: pink;">2</div>

<title>上中下布局</title>
<style type="text/css">
			body
			.container{
				width: 778px;
				background: #FFF;
				margin: 0 auto;/*侧边的自动值与宽度结合使用，可以将布局居中对齐*/
				text-align: left;
			}
			
			.header{
				padding: 10px 0;
				background: #ADB96E;
			}
			
			.sidebar{
				float: right;/*侧边栏居左，改为right可令侧边栏居右*/
				width: 200px;
				background: #a4f;
			}
			
			.maincontent{
				width: 570px;
				background: #eee;
			}
			
			.footer{
				clear: both;/*清除前后的浮动元素，使页脚显示在其下方*/
				position: relative;/*修改IE浏览器中clear无效的bug*/
				padding: 10px 0;
				background: #CCC49F;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<div class="header">
				<h1>网页头部</h1>
			</div>
			
			<div class="content">
				<div class="sidebar">
					
				<div class="mask"></div>
				<div id="sidebar">
	<ul>	
		<li><a href="#">list1</a></li>
		<li><a href="#">list2</a></li>
		<li><a href="#">list3</a></li>
		<li><a href="#">list24</a></li>
	</ul>	
	
</div>

				</div>
				<div class="maincontent">
					<h1>网页正文</h1>
					<h1>网页正文</h1>
					<h1>网页正文</h1>
					<h1>网页正文</h1>
					<h1>网页正文</h1>
					<h1>网页正文</h1>
				</div>
			</div>
			<div class="footer">
				<h1>脚注</h1>
				

			</div>
		</div>
		


	</body>

	</body>	
  
</html>
